<template>
	<view class="exclusive">
		<view class="title">
			<view class="text">{{ title }}</view>
			<view class="line"></view>
		</view>
		<view class="detail">{{ detail }}</view>
	</view>
</template>
<script>
	export default {
		name: "Title",
		props: {
			title: String,
			detail: String,
		}
	}
</script>
<style lang="scss" scoped>
	.exclusive {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;

		.title {
			position: relative;
			margin-bottom: 5rpx;

			.text {
				position: relative;
				z-index: 9999;
				color: #f19762;
				font-size: 40rpx;
				font-weight: bold;
			}

			.line {
				position: absolute;
				width: 80%;
				height: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: -2rpx;
				background-color: #ffe3be;
				border-radius: 20rpx;
			}
		}

		.detail {
			color: #bcbcbc;
			font-size: 28rpx;
		}
	}
</style>
